<!--
 * @Author: Frane
 * @Date: 2020-06-28 14:07:35
 * @LastEditors: 範遠茂
 * @LastEditTime: 2020-07-06 15:35:38
 * @Description: 编辑收货地址
--> 
<template>
  <div>
    <van-nav-bar title="编辑收件地址" left-text="返回" left-arrow @click-left="goback" />

    <van-address-edit
      :area-list="areaList"
      show-search-result
      show-set-default
      :address-info="AddressInfo"
      :search-result="searchResult"
      save-button-text="确认修改"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @change-detail="onChangeDetail"
    />
  </div>
</template>

<script>
import * as api from "@/api/apiList/user/address/address.js";
import area1 from "../area.js";
export default {
  props: ["id"],
  data() {
    return {
      areaList: area1, //省市区数据
      searchResult: [],
      AddressInfo: {} //收货人初始信息
    };
  },
  methods: {
    async API_GetDetails(id) {
      //根据路由携带的id获取详细的收货人信息
      return await api.get_address_detail(id);
    },
    async API_modify(
      id,//路由携带的id
      consignee = this.AddressInfo.name,//收货人姓名
      consignee_mobile = this.AddressInfo.tel,//电话
      consignee_address = this.AddressInfo.addressDetail,//详细地址
      province_name = this.AddressInfo.province,//省
      city_name = this.AddressInfo.city,//市
      area_name = this.AddressInfo.county,//区
      is_default = this.AddressInfo.isDefault,//是否默认
      country_id = 1, //国家id
      province_id = 6, //省id
      city_id = 76, //市id
      area_id = 696, //地区id
      country_name = "中国" //国家
    ) {
      //修改收货人信息
      let data = {
        consignee,
        consignee_mobile,
        consignee_address,
        province_name,
        city_name,
        area_name,
        is_default,
        country_id,
        province_id,
        city_id,
        area_id,
        country_name
      };
      console.log(consignee);

      return await api.modify_address(id, this.qs.stringify(data));
    },
    goback() {
      //返回上一页
      this.$router.go(-1);
    },

    onSave(content) {
      //确认修改按钮事件
      this.AddressInfo = content;
      console.log(this.AddressInfo);

      if (content.isDefault === true) {
        content.isDefault = "1";
      } else {
        content.isDefault = "0";
      }

      let res2 = this.API_modify(this.id);
      console.log(res2);
      this.$toast("修改成功");
      this.$router.go(-1);
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: "黄龙万科中心",
            address: "杭州市西湖区"
          }
        ];
      } else {
        this.searchResult = [];
      }
    }
  },
  async created() {
    let detail = {};
    let res = await this.API_GetDetails(this.id);

    if (res.data.code == 200) {
      detail = res.data.data;
    }

    //因为接口的设为默认只接受true或false,所以需要0或1转换为true或false
    if (detail.is_default === 0) {
      detail.is_default = false;
    } else {
      detail.is_default = true;
    }
    this.AddressInfo = {//转到编辑地址页面就默认显示的初始信息
      id: detail.id,
      name: detail.consignee,
      tel: detail.consignee_mobile,
      province: detail.province_name,
      city: detail.city_name,
      county: detail.area_name,
      addressDetail: detail.consignee_address,
      isDefault: detail.is_default
    };
  }
};
</script>


<style>
</style>